<template>
  <el-form-item :class="getClz()" :label="opt.text" :prop="opt.name" v-if="!opt.hide"  v-bind="opt.itemProps">
    <el-cascader
      ref="cascader"
      popper-class="cascaderAny"
      style="width: 100%;"
      :placeholder="opt.props.disabled?'':opt.placeholder"
      v-model="data[opt.name]"
      v-bind="opt.props"
      :clearable="true"
      :options="opt.options"
      :show-all-levels="false"
      :props="{expandTrigger:'hover', emitPath: false}"
      @change="setValueMap">
      <template slot-scope="{ node, data }">
        <div @click="cascaderClick(data)">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </div>
      </template>
    </el-cascader>
  </el-form-item>
</template>

<script>
  import extend from '../extend';
  let Log = ()=>{};

  export default {
    name: "FormCascaderAny",
    mixins:[extend],
    dicts:[],
    data(){
      return {
        opt: {
          name:'',
          text:'',
          prop:'',
          itemProps:{
          },
          props:{
            disabled:false,
            filterable:true
          },
          hide:false,
          placeholder:'',
          options:[]
        }
      }
    },
    mounted(){
      this.initOptions();
      this.onChange = this.opt.onChange||Log;
      this.onOptions = this.opt.onOptions||Log;
    },
    methods:{
      setValue(val = ''){
        this.data[this.opt.name] = val;
      },
      setValueMap(val,ori){
        this.onChange(this.data,this.column,ori);
        this.onOptions(this.data,this.column,[this.editRow])
      },
      cascaderClick(nodeData){// 节点事件
        if(nodeData.children?.length<1){
          this.editRow = nodeData;
        }
      }
    }
  }
</script>
